<template>
  <a-form auto-label-width layout="inline">
    <div class="component-box">
      <a-form-item label="居左">
        <xiri-form v-model="option.grid.left" option="number" />
      </a-form-item>
      <a-form-item label="居右">
        <xiri-form v-model="option.grid.right" option="number" />
      </a-form-item>
      <a-form-item label="距顶部">
        <xiri-form v-model="option.grid.top" option="number" />
      </a-form-item>
      <a-form-item label="距底部">
        <xiri-form v-model="option.grid.bottom" option="number" />
      </a-form-item>
      <a-form-item label="主题">
        <xiri-form v-model="option.theme" option="themeChoose" />
      </a-form-item>
    </div>
    <div class="component-box">
      <a-form-item label="显示工具栏">
        <xiri-form v-model="option.toolbox.show" option="switch" />
      </a-form-item>
      <template v-if="option.toolbox.show">
        <a-form-item label="左侧距离">
          <xiri-form v-model="option.toolbox.left" option="select" :optionList="leftPosition" />
        </a-form-item>
        <a-form-item label="上侧距离">
          <xiri-form v-model="option.toolbox.top" option="select" :optionList="topPosition" />
        </a-form-item>
      </template>
    </div>
  </a-form>
</template>
<script setup>
import { leftPosition, topPosition } from "@/utils/dict"

defineOptions({
  name: "echarts-grid"
})
const attrs = useAttrs()
const option = attrs.option
</script>
<style scoped lang="less">
.bi-bar {
  width: 100%;
  height: 100%;
}
</style>
